<script setup>
  import { useRouter } from 'vue-router'

  const emit = defineEmits(['backSet'])
  const router = useRouter()

  const goBack = () => {
    if (!porps.elseBack) {
      router.back()
    } else {
      emit('backSet')
    }
  }

  const porps = defineProps({
    color: {
      type: String,
      default: ''
    },
    backColor: {
      type: String,
      default: ''
    },
    fontColor: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    },
    elseBack: {
      type: Boolean,
      default: false
    }
  })
</script>
<template>
  <header class="app-bar" :style="{ background: color }">
    <div class="left">
      <a v-if="showBack" href="javascript:;" class="go-back" @click="goBack">
        <svg
          t="1617626403532"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2040"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="200"
          height="200"
        >
          <path
            d="M704.9216 929.6384a36.096 36.096 0 0 1-24.5248-9.4208l-439.1936-407.04a30.5664 30.5664 0 0 1 0-45.5168l439.1936-407.04a36.608 36.608 0 0 1 48.9984 0 30.5664 30.5664 0 0 1 0 45.4656l-414.72 384.3072 414.72 384.3584a30.5664 30.5664 0 0 1 0 45.4656 36.096 36.096 0 0 1-24.4736 9.4208z"
            :fill="backColor"
            p-id="2041"
          ></path>
        </svg>
      </a>
    </div>

    <div class="title" :style="{ color: fontColor }">
      <slot name="title"></slot>
    </div>

    <div class="right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

<style lang="scss" scoped>
  .app-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 99;
    background: var(--app-bg-color);
  }
  .left {
    position: absolute;
    color: #ffffff;
    left: 0;
    .go-back {
      position: relative;
      display: block;
      width: 44px;
      height: 44px;
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        path {
          fill: var(--color);
        }
      }
    }
  }
  .right {
    color: var(--app-color);
    position: absolute;
    right: 15px;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    color: var(--app-color);
  }
  .icon {
    width: 40px;
  }
  .notice {
    width: 20px;
    margin-right: 10px;
  }
</style>
